<script lang="ts" setup>
import router from "@/router";
import { getCurrentInstance, onMounted } from "vue";
import { loadEnv } from '@build/index'
import * as api from '@/api/login'

import { useLoginAccountStoreWithOut } from '@/store/modules/login'
import { createPermissionRouterGuard } from "@/router/guard/permissionGuard";
import { UA } from "@/utils/wecom";

const loginAccountStore = useLoginAccountStoreWithOut()
const { VITE_Redirect_Uri } = loadEnv()

onMounted(async () => {
  let token = loginAccountStore.getToken

  let ua = getCurrentInstance()?.appContext.app.config.globalProperties.$ua;
  let isWecom = ua !== UA.Browser && ua !== UA.BrowserApp

  if (token == null || token == undefined || token == '') {
        
    if (isWecom) {
      let authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wwce43b50f723f7ec6&redirect_uri=${encodeURI(`${VITE_Redirect_Uri}/ams/api/wecom`)}&response_type=code&scope=snsapi_base#wechat_redirect`

      window.location.href = authUrl
    }
    else {
      let uid = loginAccountStore.getUserId

      if (uid == null || uid == undefined || uid == '') {
        let queryUid = router.currentRoute.value.query.uid as string        
        if (queryUid == undefined || queryUid == '' || queryUid == null) {
          router.push('/login')

          return;
        } else {
          uid = queryUid
        }        
      }            

      let res = await api.getTokenByUid(uid)

      let retry = 0;
      while (retry++ < 10) {
        
        var currentToken = loginAccountStore.getToken
            
        if (currentToken !== null && currentToken != undefined) {                    
          let guardResult = await createPermissionRouterGuard(router, true);
          if (guardResult) {
            router.replace('/redirect')

            break;
          }          
        }
      }

      if (retry == 10) {        
        if (!isWecom) {
          router.push('/login')
        }  
      }            
    }
  } else {    
    let guardResult = await createPermissionRouterGuard(router, true);

    if (guardResult) {
      console.log('认证成功');
      router.replace('/redirect')
    }
  }  
})
</script>
<template>
      <div>        
        <div class="app-loading">
          <div class="app-loading-wrap">
            <img src="/logo.svg" class="app-loading-logo" alt="Logo" />
            <div id="loading">
              <div id="loading-center">
                <div id="loading-center-absolute">
                  <div class="object" id="object_one"></div>
                  <div class="object" id="object_two"></div>
                  <div class="object" id="object_three"></div>
                  <div class="object" id="object_four"></div>
                </div>
              </div>
            </div>
            <div class="app-loading-tip">
              Loading ...
            </div>
            <div class="app-loading-title">
              AMS
            </div>
          </div>
        </div>
      </div>
</template>

<style>
html,
body,
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

html[data-theme='dark'] .app-loading {
  background-color: #2c344a;
}

html[data-theme='dark'] .app-loading .app-loading-title {
  color: #fff;
}

.app-loading {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f4f7f9;
}

.app-loading .app-loading-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  transform: translate3d(-50%, -50%, 0);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.app-loading .app-loading-tip {
  margin-top: 30px;
  color: #ccc;
}

.app-loading .app-loading-title {
  display: flex;
  margin-top: 30px;
  font-size: 30px;
  color: #000;
  justify-content: center;
  align-items: center;
}

.app-loading .app-loading-logo {
  display: block;
  width: 90px;
  margin: 0 auto;
  margin-bottom: 20px;
}

#loading {
  background-color: transparent;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 60px;
  top: 0px;
}

#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}

#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 45px;
  width: 45px;
  margin-top: -30px;
  margin-left: -22.5px;
  -webkit-animation: loading-center-absolute 1s infinite;
  animation: loading-center-absolute 1s infinite;

}

.object {
  width: 15px;
  height: 15px;
  background-color: #eca47a;
  float: left;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.object:nth-child(2n+0) {
  margin-right: 0px;

}

#object_one {
  -webkit-animation: object_one 1s infinite;
  animation: object_one 1s infinite;
}

#object_two {
  -webkit-animation: object_two 1s infinite;
  animation: object_two 1s infinite;
}

#object_three {
  -webkit-animation: object_three 1s infinite;
  animation: object_three 1s infinite;
}

#object_four {
  -webkit-animation: object_four 1s infinite;
  animation: object_four 1s infinite;
}

@-webkit-keyframes loading-center-absolute {
  100% {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@keyframes loading-center-absolute {
  100% {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes object_one {
  50% {
    -ms-transform: translate(15px, 15px);
    -webkit-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
}

@keyframes object_one {
  50% {
    -ms-transform: translate(15px, 15px);
    -webkit-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
  }
}

@-webkit-keyframes object_two {
  50% {
    -ms-transform: translate(-15px, 15px);
    -webkit-transform: translate(-15px, 15px);
    transform: translate(-15px, 15px);
  }
}

@keyframes object_two {
  50% {
    -ms-transform: translate(-15px, 15px);
    -webkit-transform: translate(-15px, 15px);
    transform: translate(-15px, 15px);
  }
}

@-webkit-keyframes object_three {
  50% {
    -ms-transform: translate(15px, -15px);
    -webkit-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
  }
}

@keyframes object_three {
  50% {
    -ms-transform: translate(15px, -15px);
    -webkit-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
  }
}

@-webkit-keyframes object_four {
  50% {
    -ms-transform: translate(-15px, -15px);
    -webkit-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px);
  }
}

@keyframes object_four {
  50% {
    -ms-transform: translate(-15px, -15px);
    -webkit-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px);
  }
}
</style>
